<!--
  1. 使用本组件的时候直接 写<Headers></Headers> 标签就好
  2. 不需要再components对象里注册，我已经全局引入了
  3. isReturn参数表示是否要显示返回按钮 true为显示  默认值为true
  4. isReturn参数表示是否显示右上角的完成按钮 true为显示 默认值为false
  5. 示例： <Headers>首页</Headers>
-->

<template>
  <div id="Headers">
    <div v-if="isReturn" @click="$router.go(-1)" class="returnFrist">
      <svg
        t="1553352625991"
        class="icon"
        style
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2966"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="200"
        height="200"
      >
        <path
          d="M670.8 79.7L277 474c-21.1 21.1-21.1 55.1 0 75.7l393.9 394.4c21.1 21.1 55.1 21.1 76.2 0s21.1-55.1 0-76.2l-356-356 356-356c21.1-21.1 21.1-55.1 0-76.2C736.2 69.4 723 64 709.1 64c-13.7-0.1-27.5 5.4-38.3 15.7z"
          p-id="2967"
          fill="#ffffff"
        ></path>
      </svg>
    </div>
    <div class="title">
      <slot></slot>
    </div>
    <div v-if="isSubmit" class="submit" @click="$emit('click')">完成</div>
  </div>
</template>

<script>
export default {
  name: "headers",
  props: {
    isReturn: {
      type: Boolean,
      default: true
    },
    isSubmit: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '../common/styl/mixin'
#Headers
  position fixed
  top 0
  width 100%
  display flex
  align-items center
  justify-content space-between
  height rem(50)
  width 100%
  background-color $themeColor
  color #fff
  .returnFrist
    width rem(20)
    height rem(20)
    padding rem(12)
    svg
      width 100%
      height 100%
  .title
    positCenter(50%, initial, initial, initial, -50%, 0)
    font-size rem(16)
    font-weight bold
    text-align center
  .submit
    padding rem(14)
    font-size rem(14)
</style>
